<template>
  <div
    v-loading="loading"
    class="group-layout"
    :element-loading-text="loadingText"
  >
    <el-card
      v-if="!orderInfoShow"
      style="margin-bottom: 24px"
      class="card-box"
      shadow="hover"
    >
      <el-image
        v-if="seriesData.appInfo.icon"
        class="img"
        :src="seriesData.appInfo.icon"
      >
        <div slot="error" class="image-slot">
          <i class="iconfont icon-a-Vector1"></i>
        </div>
      </el-image>
      <div v-if="seriesData.campaignForm" class="before-set">
        <p class="app-name" style="margin-bottom: 0.6em">
          {{ seriesData.appInfo.appName }}
        </p>
        <p>{{ uuAndOrgName || "--" }}</p>
        <p class="app-adress">
          <span class="">结算币种：</span>
          <span>
            {{ $store.state.user.unit === "USD" ? "美元" : "人民币" }}
          </span>
        </p>
        <p class="series-position">
          <span>投放位置：</span>
          <span>{{
            seriesData.campaignForm.adChannelType == "SEARCH"
              ? "搜索结果"
              : '"搜索"标签'
          }}</span>
        </p>

        <p
          v-if="seriesData.campaignForm.adChannelType == 'SEARCH'"
          class="app-adress"
        >
          <span class="">投放地区：</span>
          <span>{{ seriesData.campaignForm.countriesOrRegions.length }}</span>
        </p>
        <p
          v-if="seriesData.campaignForm.dailyBudgetAmountNub"
          class="day-budget"
        >
          <span class="">每日预算：</span>
          <span>{{
            seriesData.campaignForm.dailyBudgetAmountNub | $toFixed(2)
          }}</span>
        </p>
        <p
          v-if="
            seriesData.campaignNegativeKeyword &&
            seriesData.campaignForm.adChannelType == 'SEARCH'
          "
          class="block"
        >
          <span class="">广告计划屏蔽词：</span>
          <span>{{ seriesData.campaignNegativeKeyword.length || 0 }}个</span>
        </p>
        <br />
        <p
          v-if="seriesData.campaignForm.adChannelType == 'SEARCH'"
          class="block"
          style="margin-bottom: 0.6em"
        >
          <span class="">投放关键词：</span>
          <span>{{ groupData.keywords.length || 0 }}个</span>
        </p>
        <p
          v-if="seriesData.campaignForm.adChannelType == 'SEARCH'"
          class="block"
        >
          <span class="">屏蔽关键词：</span>
          <span>{{ groupData.negativeKeyword.length || 0 }}个</span>
        </p>
        <p
          v-if="
            groupData.adGroupForm.defaultBidAmountNub &&
            seriesData.campaignForm.adChannelType == 'SEARCH'
          "
          class="block"
        >
          <span class="">默认最高每次点击费用：</span>
          <span>{{
            groupData.adGroupForm.defaultBidAmountNub | $toFixed(2)
          }}</span>
        </p>

        <p
          v-if="
            groupData.adGroupForm.defaultBidAmountNub &&
            seriesData.campaignForm.adChannelType == 'DISPLAY'
          "
          class="block"
          style="margin-bottom: 0.6em"
        >
          <span class="">每千次展示费用出价上限：</span>
          <span>{{
            groupData.adGroupForm.defaultBidAmountNub | $toFixed(2)
          }}</span>
        </p>
        <p
          v-if="
            groupData.adGroupForm.cpaGoalNub &&
            seriesData.campaignForm.adChannelType == 'SEARCH'
          "
          class="block"
        >
          <span class="">目标下载单价CPA：</span>
          <span>{{ groupData.adGroupForm.cpaGoalNub | $toFixed(2) }}</span>
        </p>
        <br />
        <p class="block">
          <span class="">设备：</span>
          <span>{{
            groupData.targeForm.deviceClassStr == "IPAD,IPHONE"
              ? "IPad和IPhone"
              : groupData.targeForm.deviceClassStr == "IPHONE"
              ? "仅限IPhone"
              : "仅限IPad"
          }}</span>
        </p>
        <p class="block">
          <span class="">用户类型：</span>
          <span>{{
            groupData.targeForm.appDownloadersStr == "all"
              ? "全部用户"
              : "新用户"
          }}</span>
        </p>
        <p class="block">
          <span class="">性别：</span>
          <span>{{
            groupData.targeForm.genderStr == "F,M"
              ? "不限"
              : groupData.targeForm.genderStr == "F"
              ? "女"
              : "男"
          }}</span>
        </p>
        <p class="block">
          <span class="">年龄：</span>
          <span>{{
            groupData.targeForm.minMaxAge.minAge == "all"
              ? "不限年龄"
              : `${groupData.targeForm.minMaxAge.minAge}-${
                  groupData.targeForm.minMaxAge.maxAge === 65
                    ? "65+"
                    : groupData.targeForm.minMaxAge.maxAge
                }`
          }}</span>
        </p>
        <p class="block">
          <span class="">位置：</span>
          <span
            v-if="
              seriesData.campaignForm.countriesOrRegions.length > 1 ||
              groupData.targeForm.localArr.length < 1
            "
            >--</span
          >
          <span v-else>{{ groupData.targeForm.localArr.length }}个</span>
        </p>

        <p class="block">
          <span class="">时间：</span>

          <span>{{ groupData.adGroupForm.startTime }} 开始 </span>
          <span v-if="groupData.adGroupForm.endTime">&nbsp; 至 &nbsp;</span>
          <span v-if="groupData.adGroupForm.endTime"
            >{{ groupData.adGroupForm.endTime }} 结束
          </span>
          <span class=""
            >({{
              $store.state.user.timeZone === "UTC" ? "UTC" : "亚洲/上海"
            }}
            时间)</span
          >
        </p>
      </div>
    </el-card>

    <div v-if="!orderInfoShow" style="position: relative; padding-right: 232px">
      <el-card shadow="never">
        <div class="set-box">
          <cell-header
            title="效果预览"
            style="padding-bottom: 32px; padding-top: 12px"
          />
          <div class="preview">
            <div class="preview-title">
              <span
                :class="
                  previewName == 'iphone'
                    ? 'active webfont-Medium'
                    : 'webfont-Medium'
                "
                @click="previewName = 'iphone'"
                >iPhone
              </span>
              <span
                v-if="seriesData.campaignForm.adChannelType !== 'SEARCH'"
                :class="
                  previewName == 'ipad'
                    ? 'active webfont-Medium'
                    : 'webfont-Medium'
                "
                @click="previewName = 'ipad'"
                >iPad</span
              >
            </div>

            <div class="preview-main">
              <template
                v-if="seriesData.campaignForm.adChannelType !== 'SEARCH'"
              >
                <!-- iphone -->
                <div v-if="previewName == 'iphone'" class="flex">
                  <div
                    style="
                      height: 300px;
                      width: 146px;
                      border-radius: 4px;
                      position: relative;
                      overflow: hidden;
                    "
                  >
                    <phonePre
                      class="iphone-pre"
                      :app-info="seriesData.appInfo"
                    />
                  </div>
                </div>

                <!-- ipad -->
                <div
                  v-else
                  style="
                    height: 300px;
                    width: 560px;
                    border-radius: 4px;
                    position: relative;
                    overflow: hidden;
                  "
                >
                  <padPre :app-info="seriesData.appInfo" />
                </div>
              </template>

              <template v-else>
                <!-- iphone -->
                <div v-if="previewName == 'iphone'" class="flex">
                  <div
                    style="
                      height: 446px;
                      width: 560px;
                      border-radius: 4px;
                      position: relative;
                    "
                  >
                    <serachPre
                      class="iphone-pre"
                      :app-info="seriesData.appInfo"
                    />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div
          style="
            font-size: 12px;
            line-height: 12px;
            padding-top: 16px;
            color: #acb6c2;
          "
        >
          评级及价格并不反映实际数值，本预览并不包括预定标签
        </div>
        <div class="set-box">
          <div
            v-if="authorizationShow"
            class="authorization-box"
            style="
              paddingTop:'24px'
            "
          >
            <h3 class="webfont-Medium">提交授权书与相关资料</h3>
            <p style="padding-bottom: 16px">
              根据Apple Ads相关规定，要在中国大陆投放广告，<span
                style="color: #ea9635"
                >你必须将所需文件上传到Apple
                Ads，并且你的app和账号必须处于已批准状态。</span
              >请在创建后前往Apple
              Ads授权，完成之前，你的广告系列将处于暂停状态。
            </p>
          </div>

          <div style="padding-top: 24px">
            <template>
              <el-button
                size="small"
                class="defult"
                style="margin-top: 16px"
                @click="goToBefore"
                >上一步</el-button
              >
              <el-button
                size="small"
                type="success"
                class="defult"
                style="margin-top: 16px"
                @click="handleSubPay('later')"
                >开始投放</el-button
              >
            </template>
          </div>
        </div>
      </el-card>
      <slot />
    </div>

    <div v-else class="order-info-box">
      <payOrderInfo :order-info="orderInfo" style="width: 360px" />
      <div v-if="$route.query.state * 1 !== 1 && !orderInfo.order">
        <el-button
          size="small"
          style="margin-left: 24px; width: 132px; height: 32px"
          @click="$router.replace({ name: 'typeOverview' })"
          >返回数据概览</el-button
        >
        <el-button
          type="success"
          size="small"
          style="margin-left: 24px; width: 132px; height: 32px"
          class="defult"
          >重新支付</el-button
        >
      </div>
      <div v-else>
        <el-button
          type="success"
          size="small"
          style="margin-left: 24px; width: 132px; height: 32px"
          @click="$router.replace({ name: 'typeOverview' })"
          >返回数据概览</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import cellHeader from "@/components/cell-header.vue";
import phonePre from "../components/previewBox/phonePre.vue";
import padPre from "../components/previewBox/padPre.vue";
import serachPre from "../components/previewBox/serach.vue";
import payOrderInfo from "@/components/payOrderInfo/index.vue";
import payDetails from "@/components/payDetails/index.vue";
import dayjs from "dayjs";
const moment = dayjs;
var utc = require("dayjs/plugin/utc");
moment.extend(utc);
import {
  sendAdvInfo,
  OrderPayment, // 创建之后付款
  findAmountPayable, // 查询用户余额等
  returnOrderInfo, // 查询订单信息
} from "@/api/create.js";

export default {
  name: "CreatePut",
  components: {
    payDetails,
    payOrderInfo,
    cellHeader,
    phonePre,
    padPre,
    serachPre,
  },

  data() {
    return {
      orderInfoShow: false, // 是否显示订单接口
      orderInfo: {}, // 订单信息
      orderPayType: true, // 订单是否已经支付成功了
      payDisabled: true,
      paySuccess: false,
      addLoading: "false",
      loading: false, // 加载动画
      loadingText: "正在创建中",
      groupData: {}, // 之前设置的广告组
      seriesData: {}, // 之前设置的广告系列
      orderId: undefined, // 创建的订单号
      balance: 0, // 余额
      payData: {},
      createFlag: true, // 是否能够开始支付流程
      payImg: require("@/assets/images/icon/payImg.png"), // 余额支付icon
      previewName: "iphone", // 预览效果
      payType: "zfb", // 付款方式
    };
  },
  computed: {
    authorizationShow() {
      const index =
        this.seriesData.campaignForm.countriesOrRegions.indexOf("CN");
      return index !== -1;
    },
    unit() {
      return this.$store.state.user.unit;
    },
    unitTxt() {
      if (this.unit === "RMB") {
        return "￥";
      } else {
        return "$";
      }
    },

    uuAndOrgName() {
      if (
        this.seriesData.campaignForm.uuAndOrgId
      ) {
        let nameStr = "";
        const index = this.$store.state.overview.allAc.findIndex((item) => {
          return item.uuid == this.seriesData.campaignForm.uuAndOrgId[0];
        });
        nameStr = this.$store.state.overview.allAc[index].secretName;
        const i = this.$store.state.overview.allAc[index].org.findIndex(
          (item) => {
            return item.orgId == this.seriesData.campaignForm.uuAndOrgId[1];
          }
        );
        return (
          nameStr + "/" + this.$store.state.overview.allAc[index].org[i].orgName
        );
      } else {
        return " --";
      }
    },
  },

  watch: {},

  // 路由前置守卫
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      if (to.query.time && to.query.TradeNo && to.query.orderid) {
        vm.orderInfoShow = true;
        next();
        if (to.query.state * 1 === 1) {
          localStorage.removeItem("series-DATA");
          localStorage.removeItem("group-DATA");
          vm.$message({
            duration: 1500,
            message: "充值成功",
            type: "success",
          });
        } else {
          vm.$message({
            duration: 1500,
            message: "充值失败",
            type: "error",
          });
        }
      }
    });
  },

  // 离开此页面的时候缓存数据
  beforeRouteLeave(to, form, next) {
    // 如果不是就把选择的数据删除掉
    if (
      localStorage.getItem("series-DATA") &&
      to.name !== form.name &&
      to.name !== "CreateGroup" &&
      to.name !== "CreateSeries"
    ) {
      if (
        this.paySuccess ||
        (this.$route.query.time && this.$route.query.orderid)
      ) {
        localStorage.removeItem("series-DATA");
        localStorage.removeItem("group-DATA");
        next();
      } else {
        this.$confirm("确认离开吗?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "defult",
          confirmButtonClass: "defult",
        })
          .then(() => {
            localStorage.removeItem("series-DATA");
            localStorage.removeItem("group-DATA");
            next();
          })
          .catch(() => {
            return false;
          });
      }
    } else {
      next();
    }
  },
  // created() {
  //   window.addEventListener('pageshow', () => {
  //     // 浏览器函数触发了吗
  //     this.mounted()
  //   })
  // },
  // beforeDestroy() {
  //   window.removeEventListener('pageshow', () => {})
  // },

  mounted() {
    if (!this.$route.query.TradeNo && !this.$route.query.orderid) {
      if (localStorage.getItem("series-DATA")) {
        this.seriesData = JSON.parse(localStorage.getItem("series-DATA"));
        console.log(this.seriesData);
      } else {
        // 如果没有获取到广告系列详情  则重定向为创建广告系列页面
        this.$router.replace({
          name: "CreateSeries",
          query: {
            // type: this.$route.type || 'self-help',
            ype: this.$route.type || "common",
            create: this.$route.type || "new",
          },
        });
        return false;
      }

      if (localStorage.getItem("group-DATA")) {
        this.groupData = JSON.parse(localStorage.getItem("group-DATA"));
      } else {
        // 如果没有获取到广告组详情  则重定向为创建广告组页面
        this.$router.replace({
          name: "CreateGroup",
          query: {
            type: this.$route.type || "self-help",
            create: this.$route.type || "new",
          },
        });
        return false;
      }
      // this.findAmountPayable() // 查询用户余额；
    } else {
      // 如果有订单信息的话
      this.getOrderInfo();
    }
  },
  methods: {
    // 返回上一步
    goToBefore() {
      /* return console.log(this.$router, this.$router.history, window.history, '跳转回去的路由') */

      if (this.$router.history.current.name !== "CreateGroup") {
        this.$router.replace({
          name: "CreateGroup",
          query: { ...this.$route.query },
        });
      } else {
        this.$router.go(-1);
      }
    },

    findAmountRes(res) {
      this.payDisabled = false;
      this.payData = res;
    },

    // 点击关闭侧边栏
    closeSlider() {
      this.$emit("closeSlider", false);
      this.orderInfoShow = true;
    },
    // 获取订单信息
    async getOrderInfo() {
      const obj = {
        order: this.$route.query.orderid,
      };
      const res = await returnOrderInfo(obj);
      if (res.data.data && res.data.code === 20000) {
        this.orderInfo = res.data.data;
        this.$forceUpdate();
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "获取支付订单失败，请稍候重试");
      }
    },

    // 点击了支付按钮
    async handleSubPay(type) {
      this.loading = true;
      this.payDisabled = true;
      const query = this.$route.query;
      this.loadingText = "正在创建广告系列中,请稍等";
      /* 整理出好数据格式 */
      const info = this.handleSub();

      const { data } = await this.sendAdvInfo({
        ...info,
        currencyType: this.unit,
        teamId: this.$store.state.team.teamId || "",
      });

      if (data.code === 20000) {
        // 如果广告系列创建成功且用户没有选择支付的话
        this.$message.closeAll();
        this.$message({
          duration: 1500,
          message: data.message || "创建成功",
          type: "success",
        });
        this.loadingText = "正在跳转中";
        this.paySuccess = true;

        setTimeout(() => {
          const query = {
            modelType: "help",
          };

            query.uuid = info.uuid;
            query.orgId = info.orgId;
            query.aId = info.aId;

          this.$router.replace({
            name: "typeOverview",
            query,
          });
          this.loading = false;
          this.paySuccess = true;
        }, 3500);
      } else {
        this.$message.closeAll();
        this.$message.error(data.message || "创建失败，请稍后重试");
        this.$router.replace({
          name: "createType",
        });
      }
    },

    // 支付
    async orderPayment(order) {
      const obj = {
        order,
        uid: this.$store.state.user.userInfo.userId,
        teamId: this.$store.state.team.teamId || "",
        url: encodeURIComponent(
          window.location.href + "&unit=" + this.$store.state.user.unit
        ),
      };

      const res = await OrderPayment(obj);
      this.loading = false;
      if (res.data.code === 20000) {
        // 余额不足的情况下
        if (
          res.data.message.indexOf("不足") !== -1 ||
          res.data.message.indexOf("支付宝") !== -1
        ) {
          localStorage.removeItem("series-DATA");
          localStorage.removeItem("group-DATA");
          this.$message.closeAll();
          this.$message("余额不足,即将跳往支付宝支付页面");
          const div = document.createElement("div");
          const idName = "aliPayForm" + new Date().getTime();
          div.id = idName;
          div.innerHTML = res.data.data;
          document.body.appendChild(div);
          const aliPayFormBox = document.querySelector("#" + idName + " form");
          aliPayFormBox.submit();

          var userAgent = navigator.userAgent;
          if (userAgent.indexOf("Safari") > -1) {
            setTimeout(() => {
              this.$router.replace({
                name: "CreateSeries",
                query: {
                  type: this.$route.type || "self-help",
                  create: this.$route.type || "new",
                },
              });
            }, 20);
          }
        } else {
          // 余额充足的情况下
          localStorage.removeItem("series-DATA");
          localStorage.removeItem("group-DATA");

          this.$message.closeAll();
          this.$message({
            duration: 1500,
            message: res.data.message || "支付成功",
            type: "success",
          });

          const orderInfo = await returnOrderInfo({
            order: order,
          });
          this.orderInfo = orderInfo.data.data;
          this.orderInfoShow = true;
          this.orderPayType = true;
          return;
        }
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "支付失败，请稍后重试");
        localStorage.removeItem("series-DATA");
        localStorage.removeItem("group-DATA");
        this.$router.replace({
          name: "typeOverview",
        });
      }
    },

    // 整套流程  创建一个广告计划的提交函数
    async sendAdvInfo(data) {
      this.loading = true;
      // 创建广告系列
      const res = await sendAdvInfo(data);
      if (res && res.data.code * 1 === 20000) {
        return res;
      } else {
        if (res) {
          this.$message.closeAll();
          this.$message.error(res.data.message);
        }
        this.payDisabled = false;
        this.loading = false;
        return false;
      }
      /* try {

            if(res){retu}
            // console.log(res, '你好')
            return res
          } catch (err) {
            // console.log('你好错误')

          } */
    },

    // 把数据处理成后端想要的格式；
    handleSub() {
      const { targeForm } = JSON.parse(JSON.stringify(this.groupData));

      const { campaignForm } = JSON.parse(JSON.stringify(this.seriesData));

      const { adGroupForm } = JSON.parse(JSON.stringify(this.groupData));

      if (
        campaignForm.name &&
        campaignForm.name.indexOf("_3YData_") === -1 &&
        this.$route.query.type !== "common"
      ) {
        // 广告系列名称加上userid和公司前缀
        if (this.$store.state.team.teamId) {
          campaignForm.name =
            this.$store.state.team.teamId + "_3YData_" + campaignForm.name;
        } else {
          campaignForm.name =
            this.$store.state.user.userInfo.userId +
            "_3YData_" +
            campaignForm.name;
        }
      }

      if (!Array.isArray(targeForm.deviceClassStr)) {
        // 受众-设备
        if (targeForm.deviceClassStr.indexOf(",") !== -1) {
          // 设备转换成数组
          targeForm.deviceClassStr = targeForm.deviceClassStr.split(",");
        } else {
          targeForm.deviceClassStr = [targeForm.deviceClassStr];
        }
      }

      if (!Array.isArray(targeForm.genderStr)) {
        // 受众-性别转换
        if (targeForm.genderStr.indexOf(",") !== -1) {
          delete targeForm.genderStr; // 性别如果不限  则删除这个键值对
        } else {
          targeForm.genderStr = [targeForm.genderStr];
        }
      }

      if (targeForm.minMaxAge.minAge === "all") {
        // 设置年龄
        delete targeForm.minMaxAge;
      } else if (targeForm.minMaxAge.maxAge === 65) {
        delete targeForm.minMaxAge.maxAge;
      }

      if (
        targeForm.appDownloadersStr &&
        targeForm.appDownloadersStr !== "all"
      ) {
        // 如果填写当前app的appid,就代表只允许新用户下载；
        targeForm.appDownloadersStr = [campaignForm.adamId]; // 如果只能新用户下载，包裹起来
      } else {
        if (targeForm.appDownloadersStr) {
          delete targeForm.appDownloadersStr;
        } // 否则就不传这个键值对
      }

      if (!adGroupForm.endTime) {
        // 如果结束时间不显示
        adGroupForm.endTime = undefined;
      } else {
        adGroupForm.endTime =
          this.$store.state.user.timeZone === "UTC"
            ? moment(adGroupForm.endTime).format("YYYY-MM-DDTHH:mm:ss.000")
            : moment(adGroupForm.endTime)
                .utc()
                .format("YYYY-MM-DDTHH:mm:ss.000");
      }
      adGroupForm.startTime =
        this.$store.state.user.timeZone === "UTC"
          ? moment(adGroupForm.startTime).format("YYYY-MM-DDTHH:mm:ss.000")
          : moment(adGroupForm.startTime)
              .utc()
              .format("YYYY-MM-DDTHH:mm:ss.000"); // 设置开始时间;

      if (targeForm.daypartInt && !targeForm.daypartInt.length) {
        delete targeForm.daypartInt;
      }

      if (targeForm.localArr.length) {
        const localLity = [];
        const adminArea = [];

        targeForm.localArr.forEach((item) => {
          if (item.entity === "Locality") {
            localLity.push(item.geolocationid);
          } else {
            adminArea.push(item.geolocationid);
          }
        });
        if (localLity.length) {
          targeForm.locality = {
            included: [...localLity],
          };
        }
        if (adminArea.length) {
          targeForm.adminArea = {
            included: [...adminArea],
          };
        }
        delete targeForm.localArr;
      } else {
        delete targeForm.localArr;
      }

      // 总数据
      const advInfo = {
        campaign: { ...campaignForm },

        adGroup: {
          ...adGroupForm,
          targetingDimensions: { ...targeForm },
        },
        // type: this.$route.query.type,
        orgId: campaignForm.uuAndOrgId[1] || "", // 自助投放时为空,
        uuid: campaignForm.uuAndOrgId[0] || "", // 自助投放时为
        userId: this.$store.state.user.userInfo.userId,
        teamId: this.$store.state.team.teamId || "",
      };

      if (
        advInfo.campaign.campaignGroupId ||
        advInfo.campaign.campaignGroupId === ""
      ) {
        if (this.$route.query.type !== "common") {
          advInfo.campaignGroupId = advInfo.campaign.campaignGroupId;
          advInfo.aId = "";
        }
        delete advInfo.campaign.campaignGroupId;
        delete advInfo.campaign.serialName;
      }

      if (campaignForm.adChannelType === "SEARCH") {
        // 搜索结果时
        advInfo.negativeKeyword = this.groupData.negativeKeyword;
        advInfo.campaignNegativeKeyword =
          this.seriesData.campaignNegativeKeyword;
        advInfo.keywords = this.groupData.keywords;
      }

      if (this.$route.query.type !== "common" && campaignForm.uuAndOrgId) {
        delete advInfo.campaign.uuAndOrgId;
      } else {
        delete advInfo.campaign.uuAndOrgId;
      }

      return advInfo;
    },
  },
};
</script>

<style lang="scss" scoped="true">
@import "~@/styles/variables.scss";

.group-layout {
  margin-bottom: 24px;
  position: relative;
  min-height: calc(100vh - 176px);
  min-width: 100%;
  // background-color: #FFFFFF;

  .order-info-box {
    min-height: calc(100vh - 200px);
    width: 100%;
    padding-top: 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
  }
}

.preview {
  .preview-title {
    span {
      display: inline-block;
      text-align: center;
      width: 60px;

      font-size: 14px;
      padding-bottom: 4px;

      font-size: 16px;
      line-height: 24px;
      margin-right: 24px;
      cursor: pointer;
    }

    .active {
      color: $mainColor1;
      border-bottom: 2px solid $mainColor1;
    }
  }

  .preview-main {
    padding-top: 10px;
    border-radius: 0rem;
    overflow: hidden;
    position: relative;

    p {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8f939b;
    }
  }
}

.pay-box {
  .pay-info {
    width: 564px;
    border: 1px solid #e9e9e9;
    border-bottom: nones;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;

    .info-title {
      text-align: left;
      text-indent: 18px;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
    }

    .info-main {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #e9e9e9;

        .title {
          line-height: 60px;
          width: 144px;
          text-indent: 18px;
          background: #f2f2f2;
          font-family: "webfont-Bold";
        }

        .info {
          padding-right: 30px;

          p {
            text-align: right;
          }

          .sec {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8f939b;
            padding-top: 10px;
            /* // line-height: 3rem; */
          }
        }
      }
    }
  }
}

.pay-type {
  display: flex;
  margin-bottom: 8px;

  div {
    width: 184px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 28px;
    border: 1px solid #bdc5cb;
    cursor: pointer;

    border-radius: 6px;

    img {
      width: 32px;
      height: 32px;
    }

    span {
      font-size: 16px;
      font-family: "webfont-Bold";
      margin: 0 24px;
    }

    i {
      font-size: 24px;
      color: $mainColor1;
      display: none;
    }

    &.active {
      border: 1px solid $mainColor1;

      i {
        display: inline-block;
      }
    }
  }
}

.btn-list {
  padding-bottom: 40px;
}

.authorization-box {
  padding-top: 24px;

  h3 {
    font-weight: normal;
    font-size: 16px;
    padding-bottom: 10px;
  }

  p {
    text-align: justify;
    font-size: 14px;
    line-height: 20px;
    max-width: 660px;
  }
}

.lit-title {
  padding-bottom: 12px !important;
  /deep/ .title {
    font-size: 14px;
    line-height: 14px;
  }
}
</style>
